@mixin imgsize() {
	width: 100%;
	height: 100% !important;
}

@mixin margin() {
	margin-left: 25rpx;
	margin-right: 25rpx;
}

@mixin point() {
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	white-space: normal;
	word-break: break-all;
}

@mixin justify() {
	display: -webkit-flex;
	/* Safari */
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
}

@mixin center() {
	display: flex;
	justify-content: center;
	/* 水平居中 */
	align-items: center;
	/* 垂直居中 */
}

@mixin point2() {
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	white-space: normal;
	word-break: break-all;
}

.car-list {
	.li {
		margin: 0 20rpx;
		padding: 20rpx 0 30rpx;
		overflow: hidden;
		border-bottom: 2rpx solid #F5F5F5;

		.good-img {
			width: 240rpx;
			height: 160rpx;
			border-radius: 10rpx;
			overflow: hidden;
			float: left;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.info {
			width: 440rpx;
			float: left;
			margin-left: 19rpx;

			.title {
				@include point;
				-webkit-line-clamp: 2;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: rgba(51, 51, 51, 1);
			}

			.price {
				font-size: 34rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: rgba(235, 92, 2, 1);
				margin: 15rpx 0;
			}

			.zhidao-price {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(102, 102, 102, 1);
			}

			.see-num {
				margin-top: 15rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(154, 154, 154, 1);
			}
		}

	}
}




.looking-car {
	width: 702rpx;
	margin: 0 auto;

	.li {
		box-shadow: 0px 0px 10rpx 0px rgba(0, 0, 0, 0.14);
		background: #fff;
		margin-bottom: 24rpx;
		border-radius: 10rpx;
		overflow: hidden;

		&:nth-child(1) {
			border-radius: 0 0 10rpx 10rpx;
		}

		.main {
			border-bottom: 2rpx solid #F5F5F5;
			padding: 32rpx 0 25rpx;
			margin: 0 16rpx;
			overflow: hidden;

			.good-img {
				float: left;
				width: 200rpx;
				height: 133rpx;
				border-radius: 10rpx;
				overflow: hidden;

				image {
					width: 200rpx;
					height: 133rpx;
				}
			}

			.info {
				width: 446rpx;
				float: right;

				.title {
					overflow: hidden;

					.icon {
						margin-top: 8rpx;
						width: 36rpx;
						height: 36rpx;
						@include center;
						float: left;

						image {
							width: 36rpx;
							height: 36rpx;
						}
					}

					.icon-main {
						float: left;
						width: 392rpx;
						margin-left: 18rpx;
						@include point2;
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: rgba(51, 51, 51, 1);
						line-height: 46rpx;
					}
				}

				.line {
					margin: 10rpx 0;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: rgba(153, 153, 153, 1);

					.name {}

					.con {
						color: #333333;
					}

					.orange {
						color: #EB5B01;

						&.import {
							@include point;
						}
					}
				}
			}


		}

		.bar {
			overflow: hidden;
			padding: 20rpx 0 20rpx;
			margin: 0 16rpx;
			border-bottom: 2rpx solid #F5F5F5;

			.left {
				float: left;

				.store-name {
					margin-bottom: 10rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: rgba(51, 51, 51, 1);
					float: left;
					@include point;
					width: 472rpx;
				}

				.bar-bottom {
					overflow: hidden;

					clear: both;

					.user-name {
						float: left;
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: rgba(153, 153, 153, 1);
					}

					.icon-group {
						float: left;
						margin-left: 20rpx;

						image {
							&:nth-child(1) {
								width: 44rpx;
								height: 28rpx;
							}

							&:nth-child(2) {
								width: 90rpx;
								height: 30rpx;
								margin: 0 10rpx;
							}

							&:nth-child(3) {
								width: 30rpx;
								height: 32rpx;
							}
						}

					}
				}
			}

			.right {
				float: right;

				.btn {
					float: right;
					width: 171rpx;
					height: 56rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.tips {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: rgba(153, 153, 153, 1);
				}
			}
		}


	}
}



.choose-group {
	box-shadow: 0px -8rpx 8rpx -6rpx rgba(0, 0, 0, 0.14);
	background-color: #fff;
	margin: 22rpx 0 0;
	padding: 25rpx 42rpx;
	border-bottom: 2rpx solid #F6F6F6;
	@include justify;

	.li {
		text-align: center;
		@include center;

		&.active {
			.name {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FBB000;
			}
		}

		.name {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(102, 102, 102, 1);
		}

		.icon {
			margin-left: 14rpx;
			@include center;
			width: 20rpx;
			height: 13rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}
}


.top-bar {
	width: 702rpx;
	height: 168rpx;
	background: rgba(255, 255, 255, 1);
	box-shadow: 0px 0px 10rpx 0px rgba(0, 0, 0, 0.14);
	border-radius: 10rpx;
	margin: 24rpx auto;

	.li {
		width: 33.3%;
		float: left;
		text-align: center;

		.icon {
			width: 79rpx;
			height: 79rpx;
			margin: 24rpx auto 10rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.name {
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(101, 101, 101, 1);
		}
	}
}

page {
	padding: 0;
}

.search-bar {
	padding: 0 24rpx;
	width: 750rpx;
	height: 92rpx;
	background: rgba(251, 209, 31, 1);
}



.brand-list {

	.title {
		margin: 40rpx 51rpx 22rpx;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(53, 53, 53, 1);
	}

	.list {
		.bar {
			width: 750rpx;
			height: 64rpx;
			line-height: 64rpx;
			background: rgba(241, 241, 241, 1);
			padding-left: 56rpx;
		}

		.con {
			height: 90rpx;
			line-height: 90rpx;
			border-bottom: 2rpx solid #F5F5F5;
			overflow: hidden;

			.brand-img {
				margin: 12rpx 58rpx 12rpx 28rpx;
				height: 66rpx;
				float: left;
				width: 94rpx;
				@include center;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.name {
				float: left;
			}
		}
	}
}

.choose-group {
	position: relative;

	.poup {
		position: absolute;
		top: 88rpx;
		left: 0;
		right: 0;
		height: 100vh;
		z-index: 2;
		background: rgba(0, 0, 0, .6);

		.main {
			background: #fff;
			height: 916rpx;
			border-radius: 0px 0px 20rpx 20rpx;
		}
	}
}

.configure-main {
	.year {
		.swiper-year {
			height: 60rpx !important;
		}

		margin: 0 30rpx;
		padding-top: 30rpx;
		overflow: hidden;

		.li {
			width: 160rpx !important;
			height: 60rpx !important;
			float: left;

			.con {
				width: 140rpx !important;
				height: 60rpx !important;
				line-height: 60rpx;
				background: rgba(244, 244, 244, 1);
				border-radius: 30rpx;
				color: #666666;

				&.active {
					background: linear-gradient(-90deg, rgba(253, 212, 34, 1), rgba(255, 226, 62, 1)) !important;
				}
			}
		}
	}

	.ul {
		margin-top: 30rpx;

		.samll-list {
			overflow: hidden;
			height: 110rpx;
			line-height: 110rpx;
			padding: 0 47rpx 0 43rpx;

			&.active {
				background: rgba(255, 240, 206, 1);
				position: relative;

				&::before {
					position: absolute;
					content: "";
					left: 0;
					top: 0;
					width: 18rpx;
					height: 110rpx;
					background: rgba(251, 176, 0, 1);
				}
			}
		}

		height: 636rpx;
		overflow: auto;

		.list {
			overflow: hidden;

			.name {
				width: 448rpx;
				padding-right: 30rpx;
				@include point;
				float: left;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: rgba(52, 52, 52, 1);
			}

			.price {
				float: right;
				font-size: 34rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(102, 102, 102, 1);
				width: 214rpx;
				text-align: right;
				@include point;
			}
		}
	}

}

.sbu-btn {
	overflow: hidden;
	margin-top: 30rpx;
	@include center;

	image {
		width: 331rpx;
		height: 88rpx;
		float: left;
	}
}

.color-main {
	.color {
		.list {
			float: left;
			margin: 30rpx 0 0 40rpx;
			width: 200rpx;
			height: 116rpx;
			background: rgba(244, 244, 244, 1);
			border-radius: 10rpx;

			.color-box-small-all {
				background: linear-gradient(0deg, rgba(255, 49, 49, 1), rgba(255, 244, 52, 1), rgba(37, 191, 255, 1)) !important;
			}

			.color-box-small {
				margin: 18rpx auto 0;
				width: 40rpx;
				height: 40rpx;
				background: rgba(251, 201, 114, 1);
				border-radius: 10rpx;
			}

			.name {
				margin-top: 10rpx;
				text-align: center;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(102, 102, 102, 1);
			}
		}
	}
}

.screen-main {
	height: 550rpx !important;
	padding: 0 44rpx;

	.title {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(52, 52, 52, 1);
		padding: 30rpx 0 20rpx;
	}

	.ul {
		overflow: hidden;

		.list {
			float: left;
			margin-right: 31rpx;
			margin-bottom: 20rpx;
			width: 170rpx;
			height: 70rpx;
			line-height: 70rpx;
			background: rgba(244, 244, 244, 1);
			border-radius: 35rpx;
			text-align: center;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(102, 102, 102, 1);

			&.active {
				color: #343434;
				background: linear-gradient(-90deg, rgba(253, 212, 34, 1), rgba(255, 226, 62, 1));
			}
		}

		&:nth-child(3) {
			margin-top: 8rpx;
			padding-top: 29rpx;
			border-top: 2rpx solid #eee;
		}
	}
}


.zone-main {
	.city-list {
		height: 850rpx;
		overflow: auto;

		.list {
			margin: 0 42rpx;
			border-bottom: 2rpx solid #eee;
			line-height: 90rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;

			.letter {
				color: rgba(154, 154, 154, 1);
				border-bottom: 2rpx solid #eee;
			}

			.name {
				border-bottom: 2rpx solid #eee;
				color: rgba(52, 52, 52, 1);
			}
		}
	}
}


.floor {
	position: fixed;
	right: 21rpx;
	top: 254rpx;
	font-size: 26rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #FBB000;
	text-align: center;
}

.scroller {
	height: 900rpx;
}
